<template>
    <div class="container buryingConfig" style="width:99%;margin-top:-25px;">
        <div class="query-box query-boxstudent">
            <el-form :model="queryBox" status-icon ref="queryBox">
                <el-row>
                    <el-col :span="4">
                        <el-form-item label>
                            <el-input v-model="queryBox.phone" placeholder="手机号码">
                                <template slot="prepend">手机号码</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <div class="depart-box">
                            <div class="slect-title">提交时间</div>
                            <el-date-picker
                                v-model="submitTime"
                                type="daterange"
                                :start-placeholder="'开始时间'"
                                :end-placeholder="'结束时间'"
                                range-separator="至"
                                :default-time="['00:00:00', '23:59:59']"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div class="from-btns">
                <kt-button
                    :label="$t('action.reset')"
                    perms="true"
                    type="primary"
                    @click="reset('queryBox')"
                />
                <kt-button
                    :label="$t('action.search')"
                    type="primary"
                    perms="true"
                    :loading="btnLoading"
                    @click="search"
                />
            </div>
        </div>
        <!--表格内容栏-->
        <Crm-table
            class="table-width"
            width="400"
            SmsTiming
            :data="pageResult"
            :columns="columns"
            :loading="loading"
            @handleCellClick="handleCellClick"
            permsEdit="true"
            @handleEdit="handleEdit"
            @findPage="findPage"
        ></Crm-table>
        <!-- 短信 -->
        <el-dialog
            :visible.sync="dialogVisible"
            title="号码列表"
            width="15%"
            :lock-scroll="true"
            class="smsTimingPop"
        >
            <el-table class="smsTiming" :data="tableData" stripe style="width: 100%;">
                <el-table-column prop="phone" align="center" label="手机号码" width></el-table-column>
                <!-- <el-table-column prop="submitTime" label="提交时间" width="180"></el-table-column>
                <el-table-column prop="receiveTime" label="回执时间"></el-table-column>
                <el-table-column prop="receiveState" label="状态"></el-table-column>-->
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import { baseUrl } from "@/utils/global";
import { regionDataPlus } from "element-china-area-data";
import axios from "axios";
import Cookies from "js-cookie";
export default {
    name: "SmsTiming",
    components: {
        CrmTable,
        KtButton
    },
    data() {
        return {
            size: "small",
            loading: false,
            btnLoading: false,
            smsDisplay: false,
            dialogVisible: false,
            columns: [
                { prop: "msgid", label: "任务ID", minWidth: 100 },
                { prop: "sendPhone", label: "发送号码", minWidth: 150 },
                {
                    prop: "sendNum",
                    label: "数量",
                    minWidth: 100,
                    formatter: (row, col) => {
                        if (row.sendNum != 1) {
                            return (
                                <div class="ToppingDiv">
                                    <a>{row.sendNum}</a>
                                </div>
                            );
                        } else {
                            return <div>{row.sendNum}</div>;
                        }
                    }
                },
                { prop: "submitTime", label: "提交平台时间", minWidth: 120 },
                { prop: "planSendTime", label: "计划发送时间", minWidth: 120 },
                { prop: "sendContent", label: "发送内容", minWidth: 320 }
            ],
            pageRequest: { pageNum: 1, pageSize: 10 },
            pageResult: {
                content: []
            },
            data: [
                {
                    id: "12556",
                    title: "问卷标题",
                    scope: "适用范围"
                }
            ],
            queryBox: {},
            //   地区
            options: regionDataPlus,
            selectedOptions: [],
            student_import_department: [],
            isopen: [
                {
                    value: "解锁",
                    label: "2"
                },
                {
                    value: "锁定",
                    label: "1"
                }
            ],
            loadingData: false,
            textarea: "",
            smsLength: 0,
            smsContent: "",
            smsContentLengths: 1,
            submitTime: [],
            tableData: ""
        };
    },
    methods: {
        handleCellClick(index, row) {
            if (index.row.property == "sendNum") {
                if (index.index.sendPhones.length > 1) {
                    this.dialogVisible = true;
                    index.index.sendPhones.forEach(item => {
                        item.submitTime = index.index.submitTime;
                    });
                    this.tableData = index.index.sendPhones;
                }
            }
        },
        // 搜索
        search() {
            this.loadingData = true;
            this.loading = true;
            this.btnLoading = true;
            if (this.submitTime.length > 1) {
                this.queryBox.submitStartTime = this.submitTime[0];
                this.queryBox.submitEndTime = this.submitTime[1];
            }
            this.findPage(null);
        },
        // 获取分页数据
        findPage: function(data) {
            this.queryBox.sendMsgType = 1;
            this.queryBox.isPlanSend = 1;
            this.loading = true;
            if (data !== null) {
                this.loading = true;
                this.btnLoading = true;
                // this.pageRequest = data.pageRequest;
            }
            this.$api.student.querySendInfo(this.queryBox).then(res => {
                if (res.result == 1) {
                    this.loading = false;
                    this.btnLoading = false;
                    let phone = [];
                    res.data.forEach(item => {
                        item.sendPhones.forEach(i => {
                            phone.push(i.phone + ",");
                        });
                        item.sendPhone = phone.splice(",");
                        if (item.sendNum == 1) {
                            item.receiveTimeStr =
                                item.sendPhones[0].receiveTime;
                            item.receiveStateStr =
                                item.sendPhones[0].receiveState == "DELIVRD"
                                    ? "成功"
                                    : "失败";
                        } else {
                            // item.receiveTimeStr = this.toTranslat(item);
                            // item.receiveStateStr = this.toTranslat(item);
                            // item.sendNum=this.toTranslatNum(item)
                        }
                    });
                    let content = { content: res.data, totalSize: res.total };
                    this.pageResult = content;

                    this.loading = false;
                    this.loadingData = false;
                    this.btnLoading = false;
                    this.smsDisplay = true;
                }
            });
        },

        reset(queryBox) {
            this.$refs.queryBox.resetFields();
            this.queryBox.sendMsgType = 1;
            this.queryBox.phone = "";
            this.queryBox.submitStartTime = "";
            this.queryBox.submitEndTime = "";
            this.submitTime = [];
            this.findPage(null);
        },
        handleEdit(params) {
            this.$message({ message: "请联系管理人员！", type: "info" });
        },
        toTranslat(item) {
            if (item.sendNum != 1) {
                return (
                    <div class="ToppingDiv">
                        <a>点击查看</a>
                    </div>
                );
            }
        },
        toTranslatNum(item) {
            if (item.sendNum > 1) {
                return (
                    <div class="ToppingDiv">
                        <a>{item.sendNum}</a>
                    </div>
                );
            }
        },
        getDownList() {
            this.student_type_options = JSON.parse(
                localStorage.getItem("stdentTpye")
            );
            this.student_data_from_options = JSON.parse(
                localStorage.getItem("studentSource")
            );
            this.student_data_from_type_options = JSON.parse(
                localStorage.getItem("stdentDataFromType")
            );
            this.subject_Options = JSON.parse(
                localStorage.getItem("studentSubject")
            );
            this.student_progress_options2 = JSON.parse(
                localStorage.getItem("studenProgress2")
            );
            this.student_progress_options = JSON.parse(
                localStorage.getItem("studenProgress")
            );
            this.oemType = JSON.parse(localStorage.getItem("oemType"));
            this.$api.user
                .optionsList({ codeType: "student_import_department" })
                .then(res => {
                    this.student_import_department = res.keyValueList;
                });
        },
        handleClearable(value) {
            if (this.userName == "") {
                this.queryBox.belongTo = "";
            }
            if (this.userDerpatName == "") {
                this.queryBox.departmentId = "";
            }
            if (this.branchCenterName == "") {
                this.queryBox.providerAgent = "";
            }
        },
        // 发送短信
        smsSend() {
            this.dialogVisible = true;
        },
        smsSend2() {
            this.$api.student
                .sendMsg({
                    sendMsgType: 1,
                    userId: Cookies.get("userId"),
                    phones: this.textarea,
                    // sendSwitch: 1, //发送开关，不传值就是不发送，随便传个不为0的值就是发送
                    sendContent: this.smsContent
                })
                .then(res => {
                    if (res.result == 2) {
                        this.$message({ message: res.msg, type: "error" });
                    } else {
                        this.$message({ message: res.msg, type: "success" });
                    }
                });
        },
        smsContentChange(val) {
            this.smsContentLength = this.strlen(val);
            this.smsContentLengths = Math.ceil(this.strlen(val) / 70);
        },
        // 判断字符长度
        strlen(str) {
            var len = 0;
            for (var i = 0; i < str.length; i++) {
                var c = str.charCodeAt(i);
                //单字节加1
                if (
                    (c >= 0x0001 && c <= 0x007e) ||
                    (0xff60 <= c && c <= 0xff9f)
                ) {
                    len++;
                } else {
                    len += 2;
                }
            }
            return len;
        }
    },

    created() {
        let _this = this;
        window.showTime = _this.showTime;
        window.itemData = _this.itemData;
    },

    mounted() {
        this.getDownList();
    }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.dataList {
    overflow: hidden;
    height: 120px;
    ul {
        li {
            list-style: none;
            float: left;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            p {
                margin: 0;
                border: 1px solid #000;
            }
            p:first-child {
                background: #cccccc;
                border-bottom: none;
            }
        }
    }
}
.clear {
    clear: both;
    overflow: hidden;
    display: block;
    height: 0px;
    _height: 1px;
}
.ToppingDiv {
    a {
        text-decoration: none;
        cursor: pointer;
        color: blue;
    }
}
</style>
<style lang="scss">
.smsTimingPop {
    .el-dialog__body {
        .el-table__body-wrapper {
            height: 500px;
            overflow-y: scroll;
        }
        .el-table__body td {
            padding: 5px 0;
        }
    }
}
</style>
